<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #messageBox {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: auto;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .message {
            margin: 5px 0;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        .status {
            color: #666;
            font-style: italic;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        .data {
            color: #333;
        }
    </style>
</head>
<body>
    <h2>WebSocket 实时数据测试</h2>
    <div id="messageBox"></div>
    <div id="connectionStatus" class="status">未连接</div>

    <script>
        const messageBox = document.getElementById('messageBox');
        const connectionStatus = document.getElementById('connectionStatus');
        let ws;

        function connect() {
            // 根据当前页面URL构建WebSocket URL
            const protocol = 'ws://localhost:2230';
            const wsUrl = 'ws://localhost:2230/alarmEvent';
            
            ws = new WebSocket(wsUrl);

            ws.onopen = () => {
                connectionStatus.textContent = '已连接';
                connectionStatus.style.color = 'green';
                addMessage('系统', '连接已建立');
            };

            ws.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    addMessage('数据', formatData(data));
                } catch (e) {
                    addMessage('错误', '无法解析数据: ' + event.data);
                }
            };

            ws.onclose = () => {
                connectionStatus.textContent = '连接已断开';
                connectionStatus.style.color = 'red';
                addMessage('系统', '连接已断开，5秒后重新连接...');
                setTimeout(connect, 5000);
            };

            ws.onerror = (error) => {
                addMessage('错误', '连接错误');
                console.error('WebSocket error:', error);
            };
        }

        function addMessage(type, content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message';
            const timestamp = new Date().toLocaleTimeString();
            messageDiv.innerHTML = `<strong>${timestamp}</strong> [${type}] ${content}`;
            messageBox.appendChild(messageDiv);
            messageBox.scrollTop = messageBox.scrollHeight;
        }

        function formatData(data) {
            return `
                时间戳: ${new Date(data.timestamp).toLocaleString()}<br>
                温度: ${data.temperature.toFixed(1)}°C<br>
                湿度: ${data.humidity.toFixed(1)}%<br>
                气压: ${data.pressure.toFixed(1)}hPa<br>
                风速: ${data.windSpeed.toFixed(1)}m/s
            `;
        }

        // 页面加载完成后连接WebSocket
        window.addEventListener('load', connect);
    </script>
</body>
</html>